<template>
	<div class="list">
		<div class="list-title">
			<div class="ticket">
				<span class="active">门票</span>
			</div>
			<div class="one-day">
				<span>一日游</span>
			</div>
		</div>

		<div class="ticket-list" v-for= "item of categoryList" :key = item.id>
			<div class="ticket-list-title">
				<span class="title-icon"></span>
				{{item.title}}
			</div>
			<div class="ticket-box" v-for="item2 of item.children" :key=item2.id>
				<div class="multi-ticket">
					<p class="multi-ticket-content">{{item2.title}}</p>
					<div class="multi-ticket-right" @click='toggleMore(item2.id,item2.isShowMore)'>
						<span class="price">{{item2.price}}</span>
						<i class="iconfont">&#xe616;</i>
					</div>
				</div>
				<div class="more-ticket" v-for="item3 of item2.children" :key=item3.id v-show=item2.isShowMore>
					<p class="multi-ticket-content">{{item3.title}}</p>
					<div class="more-ticket-right">
						<span class="price">{{item3.price}}</span>
						<div class="btn">提交</div>
					</div>						
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		name:'DetailList',
		props:{
			categoryList:{
				type:Array
			}
		},
		methods:{
			toggleMore(id,show){
				for(let i = 0 ; i <this.categoryList.length ; i++ ){
					for(let a = 0 ; a < this.categoryList[i].children.length ; a++){
						this.categoryList[i].children.forEach((value)=>{
							if(value.id==id){
								value.isShowMore = !show
							}
						})
					}
				}
			}
		}
	}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/global.styl'
	.list{
		font-size: .36rem
		background-color: #eee;
	}
	.list-title{
	    background-color: #fff;
	}
	.list-title>div{
		display: inline-block;
	    height: .92rem;
	    line-height: .96rem;
	    width:49%;
	    text-align: center;
	    font-size: .32rem;
	    box-sizing: border-box;
	    border-bottom: 1px solid #eee;
	}
	.list-title span.active{
		display: inline-block;
		width: 1.4rem;
		height: .91rem;
		border-bottom: .06rem solid $bgColor
	}
	.ticket-list{
	    margin-bottom: .2rem;
	    background: #fff;
	}
	.ticket-box{
		position: relative;
	}
	.ticket-list-title{
	    overflow: hidden;
	    position: relative;
	    margin-bottom: -.02rem;
	    padding: 0 .2rem;
	    height: .88rem;
	    background: #fff;
	    color: #333;
	    font-size: .36rem;
	    line-height: .88rem;
	    text-indent: .4rem;
	    border-bottom: 1px solid #e0e0e0;
	}
	.title-icon{
	    display: inline-block;
	    position: absolute;
	    width: .36rem;
	    height: .36rem;
	    top: .26rem;
	    left: .2rem;
	    background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
	    margin-right: .1rem;
	    background-size: .4rem 3rem;
	}
	.multi-ticket{
		position: relative;
	    margin-bottom: -.02rem;
	    padding: .24rem .2rem;
	    background: #fff;
	    border-bottom: 1px solid #eee;
	}
	.multi-ticket-content{
	    margin-right: 1.8rem;
	    font-size: .3rem;
	    color: #333;
	    line-height: .48rem;
	}
	.multi-ticket-right{
	    position: absolute;
	    top: .4rem;
	    height: .4rem;
	    line-height: .4rem;
	    right: .46rem;
	    color: #ff9800;
	    font-size: .3rem;
	}
	.more-ticket{
		position: relative;
	    padding: .4rem;
		background-color: #eee;
	}
	.more-ticket-right{
	    position: absolute;
	    top: .4rem;
	    height: .4rem;
	    line-height: .4rem;
	    right: .46rem;
	    color: #ff9800;
	    font-size: .3rem;
	    text-align: center;		
	}
	.btn{
		width: 1.5rem;
		height: .6rem;
		line-height: .6rem;
		font-size: .28rem;
		color: #fff;
		border-radius: .1rem;
		background-image: linear-gradient(130deg,#ffab1e 37%,#ff8c12 100%);
	}
</style>